import React, { Component } from 'react';
import './Login.css';
// import Logfrom from './Logfrom'


class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            scrennHeight: window.screen.height,
            scrennWidth: window.screen.width,
            valuePhone: '',
            valuePwd: '',
            background: '#d33a31',
            show: false
        }
    }
    handleClick() {
        if (this.state.valuePhone && this.state.valuePwd) {
            fetch('http://106.12.79.128:666/login/cellphone?phone=' + this.state.valuePhone + '&password=' + this.state.valuePwd)
                .then(res => res.json()).then(res => {
                    // console.log(res)
                    if (res.code !== 200) {
                        this.setState({ show: true })
                    } else {
                        window.localStorage.setItem('uid', res.account.id)
                        window.localStorage.setItem('phone', this.state.valuePhone)
                        window.localStorage.setItem('password', this.state.valuePwd)
                        this.props.history.push('/personal');
                    }
                    this.setState({ valuePwd: '', valuePhone: '' })
                })
        }
    }
    handleChangeText(e) {
        this.setState({ valuePhone: e.target.value, show: false }, () => {
            if (this.state.valuePhone && this.state.valuePwd) {
                this.setState({ background: '#ff3a3a' })
            }
        })
    }
    handleChangePwd(e) {
        this.setState({ valuePwd: e.target.value, show: false }, () => {
            if (this.state.valuePhone && this.state.valuePwd) {
                this.setState({ background: '#ff3a3a' })
            }
        })
    }
    render() {
        return (
            <div className='login-container' style={{ height: this.state.scrennHeight, overflow: 'hidden', width: this.state.scrennWidth }}>
                <div className='login-container-img'>
                    <img src={require("../assets/img/wx_20190830141158.png")} />
                </div>
                <div className='login-container-from'>
                    {/* <Logfrom/> */}
                    <div style={{ display: 'flex' }} className="login-container-div" >
                        <span className="login-container-span">手机号:</span>
                        <input type='text' className="login-container-input" style={{ background: 'transparent' }} value={this.state.valuePhone} onChange={this.handleChangeText.bind(this)} />
                    </div>
                    <div style={{ display: 'flex' }} className="login-container-div">
                        <span className="login-container-span">密码:</span>
                        <input type='password' className="login-container-input" style={{ background: 'transparent' }} value={this.state.valuePwd} onChange={this.handleChangePwd.bind(this)} />
                    </div>
                    <div className="login-container-info" style={{ display: this.state.show ? 'block' : 'none' }}>
                        账号或密码错误！
                    </div>
                </div>
                <div className='login-container-log'>
                    <span className='login-container-log-btn' onClick={this.handleClick.bind(this)} style={{ background: this.state.background }}>手机号登陆</span>
                </div>
            </div>
        );
    }
}

export default Login;